<template>
	<view class="order-list">
		<view class="header">
			<text class="title">查询历史审批</text>
		</view>

		<view class="filter-container">
			<view class="filter-item">
				<label>工单状态</label>
				<picker mode="selector" :range="statusOptions[0]" @change="onStatusChange">
					<view class="picker">
						{{ selectedStatusText ? '已选状态：' + selectedStatusText : '请选择状态' }}
					</view>
				</picker>
			</view>
			<view class="filter-item">
				<label>工单类型</label>
				<picker mode="selector" :range="typeOptions" @change="onTypeChange">
					<view class="picker">
						{{ selectedTypeText ? '已选类型：' + selectedTypeText : '请选择类型' }}
					</view>
				</picker>
			</view>
			<view class="filter-item">
				<label>创建时间</label>
				<picker mode="date" @change="onDateChange">
					<view class="picker">
						{{ formData.createTime || '请选择创建时间' }}
					</view>
				</picker>
			</view>
			<view class="filter-item">
				<label>起始页</label>
				<input type="number" v-model="formData.page" placeholder="起始页" />
			</view>
			<view class="filter-item">
				<label>页大小</label>
				<input type="number" v-model="formData.pageSize" placeholder="页大小" />
			</view>
			<button class="submit-button" @click="loadOrders">查询</button>
		</view>

		<view v-if="orders.length > 0" class="order-cards">
			<view v-for="order in orders" :key="order.id" class="order-card" @click="handleOrderAction(order)">
				<view class="card-header">
					<text class="card-title">#{{ order.id }}</text>
					<!-- <text class="card-status">{{ getStatusText(order.status) }}</text> -->
				</view>
				<view class="card-info">
					<view><text class="label">工单类型：</text>{{order.title}}</view>
					<view><text class="label">申请人：</text>{{ order.userName }}</view>
					<view><text class="label">职位：</text>{{ order.name }}</view>
					<view><text class="label">提交时间：</text>{{ order.createTime }}</view>
					<view><text class="label">紧急程度：</text>
						<text :class="['urgency-tag', 'urgency-' + order.urgency]">
							{{ formatUrgency(order.urgency) }}
						</text>
					</view>
					<view><text class="label">超时预警：</text>
						<text :class="['timeout-tag', order.TimeOutApproval ? 'timeout-yes' : 'timeout-no']">
							{{ formatTimeout(order.TimeOutApproval) }}
						</text>
					</view>

				</view>
			</view>
		</view>

		<view v-else-if="orders.length === 0 && loaded" class="empty-state">
			<text>暂无数据</text>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				loaded: false, // 用于标记是否已经加载过数据
				statusMap: { // 状态码与文本的映射关系
					1: '待审批',
					2: '已审批',
					3: '已驳回',
					4: '操作中',
					5: '已完成',
					6: '已撤销'
				},
				orders: [], // 订单列表
				token: null, // 登录成功后获取的 Token
				formData: {
					title: '', // 工单对应的流程类型的名称
					createTime: '', // 创建时间
					page: 1, // 起始页
					pageSize: 20, // 页大小
					statusList: [] // 工单对应的状态列表，初始化为空数组
				},
				statusOptions: [
					['待审批', '已审批', '已驳回', '操作中', '已完成', '已撤销']
				],
				selectedStatusText: "", // 用于显示选中的状态文本
				typeOptions: [], // 用于存储从接口获取的类型列表
				selectedTypeText: "" // 用于显示选中的类型文本
			};
		},
		methods: {
			getStatusText(statusCode) {
				return this.statusMap[statusCode] || '未知状态';
			},
			onStatusChange(e) {
				const selectedIndex = e.detail.value;
				const selectedLabel = this.statusOptions[0][selectedIndex];

				this.selectedStatusText = selectedLabel;

				// 发送给后端的状态码，默认从 1 开始（+1）
				this.formData.statusList = [selectedIndex + 1];
			},
			onDateChange(e) {
				const selectedDate = e.detail.value; // 用户选择的日期，格式为 "YYYY-MM-DD"
				const fullDateTime = `${selectedDate} 00:00`; // 将时间设置为 00:00，中间用空格隔开，没有 T
				this.formData.createTime = fullDateTime;
			},
			async loadOrders() {
				try {
					this.token = uni.getStorageSync('token');

					if (this.formData.statusList.length === 0) {
						this.formData.statusList = [0]; // 如果没有选择状态，则默认为0
					}

					const res = await uni.request({
						url: "http://localhost:8082/api/approve/historyList", // 后端接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'PUT',
						data: { // 直接发送对象
							page: this.formData.page,
							pageSize: this.formData.pageSize,
							title: this.formData.title,
							statusList: this.formData.statusList, // 使用 statusList 数组
							createTime: this.formData.createTime
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						console.log(res.data);
						this.orders = res.data.data.records; // 假设后端返回的数据结构为 { code: 1, data: { records: [...] }}
						this.loaded = true; // 标记数据已加载
					} else {
						console.log(res.data);
						uni.showToast({
							title: '加载审批列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			formatUrgency(urgency) {
				switch (urgency) {
					case 1:
						return '低';
					case 2:
						return '中';
					case 3:
						return '高';
					default:
						return '未知';
				}
			},
			formatTimeout(timeOut) {
				return timeOut ? '是' : '否';
			},
			async fetchTypeList() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList", // 获取类型列表的接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'GET'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeOptions = res.data.data.map(item => item
							.typeName); // 假设返回的数据结构为 [{ typeName: '类型1'}, { typeName: '类型2'}]
					} else {

						uni.showToast({
							title: '加载类型列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			onTypeChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedTypeText = this.typeOptions[selectedIndex]; // 更新选中的类型文本
				this.formData.title = this.typeOptions[selectedIndex];
			},
			handleOrderAction(order) {
				// 这里添加对订单的操作逻辑，例如跳转到详情页
				uni.navigateTo({
					url: `/pages/orderDetail/orderDetail?id=${order.id}` // 假设订单详情页路径
				});
			},
		},
		mounted() {
			this.fetchTypeList(); // 页面加载时获取类型列表
		}
	};
</script>

<style scoped>
	.order-list {
		padding: 16px;
		background-color: #fff;
		min-height: 100vh;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	.header {
		background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
		color: #fff;
		padding: 16px;
		border-radius: 12px;
		margin-bottom: 20px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}

	.filter-container {
		background-color: #fff;
		padding: 16px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		flex-direction: column;
		display: grid;

		gap: 12px;

	}

	.filter-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 12px;
	}

	.filter-item label {
		width: 100px;
		/* 左边标签宽度 */
		margin-right: 10px;
		font-weight: bold;
		color: #333;
	}

	.picker,
	.filter-item input {
		flex: 1;
		padding: 10px;
		border: 1px solid #d0d0d0;
		border-radius: 6px;
		background-color: #f9f9f9;
		color: #333;
	}

	/* 查询按钮样式优化 */
	.submit-button {
		width: 100%;
		padding: 12px;
		background: linear-gradient(90deg, #007aff 0%, #005fcc 100%);
		color: white;
		font-weight: bold;
		border: none;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		margin-top: 20px;
	}


	.picker:active,
	input:focus {
		border-color: #1890ff;
		background-color: #ffffff;
	}


	.submit-button:active {
		background-color: #1677ff;
	}

	.order-cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.order-card {
		background-color: #fff;
		padding: 16px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		cursor: pointer;
	}

	.order-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #1890ff;
	}

	.card-status {
		font-size: 14px;
		padding: 4px 8px;
		background-color: #e6f7ff;
		color: #1890ff;
		border-radius: 6px;
	}

	.card-info view {
		margin-bottom: 6px;
		font-size: 14px;
		color: #333;
	}

	.label {
		color: #666;
		font-weight: 500;
	}

	.empty-state {
		text-align: center;
		color: #999;
		font-size: 16px;
		margin-top: 40px;
	}

	.urgency-tag {
		padding: 2px 6px;
		border-radius: 6px;
		color: #fff;
		font-size: 12px;
	}

	.urgency-1 {
		background-color: #52c41a;
		/* 低：绿色 */
	}

	.urgency-2 {
		background-color: #faad14;
		/* 中：橙色 */
	}

	.urgency-3 {
		background-color: #f5222d;
		/* 高：红色 */
	}

	.timeout-tag {
		padding: 2px 6px;
		border-radius: 6px;
		color: #fff;
		font-size: 12px;
	}

	.timeout-yes {
		background-color: #f5222d;
		/* 超时：红色 */
	}

	.timeout-no {
		background-color: #52c41a;
		/* 未超时：绿色 */
	}
</style>